<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 120px;
            border: 1px solid #ccc;
        }
        .box1{
            width: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            
        }
        .box3{
            text-align: center;
        }
    </style>
    <script src="../js/js.vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- <div class="box1">
        <input type="text" placeholder="用户名" v-model="a">
        <input type="password" v-model="x">
        <div class="box3">
        <label for="text">同意</label>
        <input type="checkbox" id="app" v-model="check">
    </div>
        <button @click="w" >提交</button>
    </div> -->
    <!-- <label for="z">z</label>
    <input type="checkbox" id="z" v-model="check" value="a">
    <label for="v">v</label>
    <input type="checkbox" id="v" v-model="check" value="b">
    <label for="x">x</label>
    <input type="checkbox" id="x" v-model="check" value="c">
    <label for="c">c</label>
    <input type="checkbox" id="c" v-model="check" value="d"> -->
    <label for="z">男</label>
    <input type="radio" id="z" v-model="acta" :value="z">
    <label for="s">女</label>
    <input type="radio" id="s" v-model="acta" :value="s">
    <input type="" v-model.lazy="ac">  <!-- 默认情况每次input事件都会更新数据，我们可以用.lazy修饰符改为每次change再更新数据。 -->
    <input v-model.number="age" /> <!-- 输入内容自动转数字，如果输入非数字字符返回原始值 -->
    <input v-model.trim="msg" /> <!-- 自动去除用户输入内容中两端的空格 -->
</div>
    <script>
        Vue.createApp({
            data(){
                return{
                    check:[],
                    // a:'',
                    // x:''
                    acta:'',
                    z:'小小杨超',
                    s:'小黑杆子',
                    ac:'',
                    age:"",
                    msg:""
                }
            }
            // ,methods:{
            //         w(){
            //             if(this.a==''||this.x==''||! this.check){
            //                 alert('提交失败')
            //                 return false;
            //             }
            //             alert('提交成功')
            //        }
            // }
        }).mount('#box')
    </script>
</body>
</html>